<template>
    <el-dialog v-model="editData.visible" :title="editData.title" center width="50%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <el-form :model="editData.form" label-width="auto" style="width:100%" ref="formRef" :rules="editData.rules">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <el-form-item label="动作名称" prop="name">
                            <el-input v-model="editData.form.name" maxlength="20" placeholder="请输入动作名称" clearable/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="动作类型" prop="type">
                            <el-select v-model="editData.form.type">
                                <el-option :value="1" label="新手区"></el-option>
                                <el-option :value="2" label="成长区"></el-option>
                                <el-option :value="3" label="老手区"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="目录" prop="catalogId">
                            <el-cascader v-model="editData.form.catalogId" :options="treeData" :props="{label:'name',value:'id'}" style="width: 100%" :emitPath="false"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="动作排序" prop="orderNum">
                            <el-input v-model="editData.form.orderNum" type="number" placeholder="请输入排序"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">

                        <el-form-item class="relative" label="封面图片" prop="cover">
                            <image-uploader-cropper v-model="editData.form.cover" :aspect-ratio="5/4" mode="single"></image-uploader-cropper>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="显示状态" prop="status">
                            <el-switch v-model="editData.form.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="显示内容" prop="content">
                            <king-editor v-model="editData.form.content"></king-editor>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import {nextTick, reactive, ref, useTemplateRef, computed} from 'vue'
import motionApi from 'api/model/motion.js'
import motionCatalogApi from 'api/model/motion-catalog.js'
import KingEditor from '@/components/king-editor/index-old.vue'
import {ElMessage} from 'element-plus'
import ImageUploaderCropper from '@/components/comp-upload/upload-img.vue'

const emits = defineEmits(['update'])
defineExpose({openDialog})

const formRef = useTemplateRef('formRef')

// 编辑相关数据
const editData = reactive({
    type: 'add',
    visible: false,
    form: {
        id: '',
        catalogId: 2,
        name: '',
        cover: '',
        description: '',
        type: '',
        content: '',
        orderNum: 0,
        status: 1,
    },
    rules: {
        name: [{required: true, message: '请输入动作名称', trigger: 'blur'}],
        type: [{required: true, message: '请选择动作类型', trigger: 'change'}],
        catalogId: [{required: true, message: '请选择目录', trigger: 'change'}],
        cover: [{required: true, message: '请上传封面图片', trigger: 'change'}],
        content: [{required: true, message: '请输入显示内容', trigger: 'blur'}],
    }
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog(type, item) {
    editData.title = type === 'add' ? '新增动作' : '编辑动作'
    editData.visible = true
    editData.type = type
    editData.form.id = ''
    nextTick(() => {
        formRef.value.resetFields()
        if (type === 'update') {
            const {id, name, cover, description, type, content, status, orderNum, catalogId} = item || {}
            editData.form.id = id
            editData.form.type = type
            editData.form.name = name
            editData.form.description = description
            editData.form.content = content
            editData.form.status = status
            editData.form.orderNum = orderNum || 0
            editData.form.catalogId = catalogId
            editData.form.cover = cover
        }
    })
}

/**
 * 提交表单
 */
function submitForm() {
    console.log(editData.form)
    formRef.value.validate(async valid => {
        if (!valid) return
        editData.type === 'add' ? await addItem() : await updateItem()
    })
}

/**
 *  新增操作
 */
async function addItem() {
    const isArray = Array.isArray(editData.form.catalogId)
    const catalogId = isArray ? editData.form.catalogId[editData.form.catalogId.length - 1] : editData.form.catalogId
    const {code, data = []} = await motionApi.add.post({
        name: editData.form.name,
        cover: editData.form.cover,
        description: editData.form.description,
        type: editData.form.type,
        catalogId: catalogId,
        content: editData.form.content,
        status: editData.form.status,
        orderNum: editData.form.orderNum,
    })
    if (code === 200) {
        ElMessage.success('新增成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('新增失败')
    }
}

/**
 *  更新操作
 */
async function updateItem() {
    const isArray = Array.isArray(editData.form.catalogId)
    const catalogId = isArray ? editData.form.catalogId[editData.form.catalogId.length - 1] : editData.form.catalogId
    const {code, data = []} = await motionApi.update.post({
        id: editData.form.id,
        name: editData.form.name,
        cover: editData.form.cover,
        description: editData.form.description,
        type: editData.form.type,
        catalogId: catalogId,
        content: editData.form.content,
        status: editData.form.status,
        orderNum: editData.form.orderNum,
    })
    if (code === 200) {
        ElMessage.success('编辑成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('编辑失败')
    }
}

/**
 *  获取目录列表
 */
const treeData = ref([])
const getCateList = async () => {
    const {code, data = []} = await motionCatalogApi.tree.get()
    treeData.value = data
}

getCateList()


</script>

<style lang="less">
.dialog-content {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
</style>
